<template>
  <div class="container">
    <topTitle :titleText="titleText" :titleExplain="titleExplain"></topTitle>
    <div class="mainCon" style="top: 198px">
      <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="建设领域" name="first" v-if="showJz"></el-tab-pane>
            <el-tab-pane label="非建领域" name="second" v-if="showFj"></el-tab-pane>
        </el-tabs> -->
      <el-radio-group
        v-model="activeName"
        @change="tabChange"
        class="tabsContainer"
      >
        <el-radio-button label="first">建设领域</el-radio-button>
        <el-radio-button label="second">非建领域</el-radio-button>
      </el-radio-group>
      <el-form
        label-width="100px"
        class="demo-ruleForm"
        v-if="activeName == 'second' && showFj"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="选择区域" prop="areaId">
              <el-cascader
                v-model="areaId"
                :options="areaIdOpt"
                @change="getAreaId"
                clearable
                filterable
                placeholder="请选择"
                :props="{ checkStrictly: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="4" class = "fr"> -->
          <div class="fr">
            <el-button
              class="commonBut saveBtn"
              type="primary"
              @click="submitEdit"
              v-sdc
              :loading="isAdd"
              >保存</el-button
            >
          </div>
          <!-- </el-col> -->
        </el-row>
        <el-row v-if="tipsMsg">
          <el-col class="tipsMsg">
            {{ tipsMsg }}
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <div class="infoTitle">银行代发方式设置</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple bankPay">
              <el-row
                v-for="(item, index) of bankWayResult"
                :key="index"
                v-if="item.subcategory == '91'"
              >
                <el-col :span="6">
                  <div class="switchBox">
                    <span class="bankName secondaryTitleTheme">{{
                      item.bankName
                    }}</span>
                    <!-- <span class="bankName">中国工商银行</span> -->
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="switchBox">
                    <span>线下授权代发</span>
                    <el-switch
                      v-model="item.objValue1"
                      active-value="1"
                      inactive-value="0"
                    >
                    </el-switch>
                  </div>
                </el-col>
                <el-col :span="6">
                  <!-- <div class="switchBox">
                                  <span>线上授权代发</span>
                                  <el-switch 
                                    v-model="item.objValue2"
                                    active-color="#009588"
                                    inactive-color="#BDC1C6"
                                    active-value="1"
                                    inactive-value="0">
                                </el-switch>
                              </div> -->
                </el-col>
                <!-- <el-col :span="6">
                                <div class="switchBox">
                                  <span>报盘代发</span>
                                  <el-switch 
                                    v-model="item.objValue3"
                                    @change="changeState($event,item,'10','30')"
                                    active-color="#009588 "
                                    inactive-color="#BDC1C6"
                                    active-value="1"
                                    inactive-value="0">
                                </el-switch>
                              </div>
                            </el-col> -->
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="showUnion">
          <el-col>
            <div class="infoTitle">银联代发设置</div>
          </el-col>
        </el-row>
        <el-row v-if="showUnion">
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="5">
                  <div class="switchBox switchBoxUnion">
                    <span class="bankName">银联代发开关</span>
                    <el-switch
                      v-model="unionPaySwitch"
                      @change="changeState($event, unionPayResult, '11', '')"
                      active-value="1"
                      inactive-value="0"
                    >
                    </el-switch>
                  </div>
                </el-col>
                <el-col :span="19" v-show="unionPaySwitch == '1'">
                  <div class="unionEditContent">
                    <el-row class="unionBox">
                      <el-col :span="3" class="unionTitle">白名单</el-col>
                      <el-col :span="21" class="unionWrap">
                        <div v-if="isUnionNoEditWhite" class="unionNoEdit">
                          <p>
                            即便是不是授权区域内的项目，加入白名单后也能使用银联代发
                          </p>
                          <span>尚未配置</span>
                        </div>
                        <div v-if="isUnionEditWhite" class="unionEdit">
                          <div class="unionList whiteList">
                            <div v-if="whiteListAddBtn" class="listAdd">
                              <el-button
                                class="commonBut listAddBtn"
                                type="primary"
                                @click="whiteListAdd"
                                >添加</el-button
                              >
                              <p>
                                即便是不是授权区域内的项目，加入白名单后也能使用银联代发
                              </p>
                            </div>
                            <div v-if="whiteListAddSure" class="listAddSure">
                              <el-select
                                v-model="whiteSelectListVal"
                                placeholder="输入项目名称，点击确认"
                                clearable
                                filterable
                                @change="whiteSelectChange"
                                @clear="whiteSelectClear"
                                class="listSearch"
                              >
                                <el-option
                                  v-for="item in whiteSelectList"
                                  :key="item.id"
                                  :label="item.projectName"
                                  :value="item.id"
                                ></el-option>
                              </el-select>

                              <el-button
                                class="commonBut listAddSureBtn"
                                type="primary"
                                @click="whiteListSure(unionPayResult.id)"
                                >确认</el-button
                              >
                              <el-button
                                class="commonBut listAddCancelBtn"
                                type="primary"
                                @click="whiteListCancel"
                                >取消</el-button
                              >
                            </div>
                            <div class="listUnionBox">
                              <div class="listUnionContent">
                                <div
                                  v-for="(item, index) of unionPayWhiteList"
                                  :key="index"
                                  class="listUnionWrap"
                                >
                                  <p>{{ item.projectName }}</p>
                                  <span
                                    @click="
                                      handelListDelete(
                                        unionPayResult.id,
                                        item.projectId,
                                        '2'
                                      )
                                    "
                                    >删除</span
                                  >
                                </div>
                              </div>

                              <el-pagination
                                v-if="unionPayWhiteList.length > 0"
                                small
                                background
                                :page-sizes="[5, 10, 15]"
                                layout="prev, pager, next,sizes, jumper"
                                :total="pageTotalWhiteEdit"
                                :current-page.sync="pageNoWhiteEdit"
                                :page-size="pageSizeNumberWhiteEdit"
                                @size-change="
                                  whitehandleSizeChangeEdit(
                                    $event,
                                    unionPayResult.id
                                  )
                                "
                                @current-change="
                                  whiteCurrentChangeEdit(
                                    $event,
                                    unionPayResult.id
                                  )
                                "
                                class="listUnionPage"
                              >
                              </el-pagination>
                            </div>
                          </div>
                        </div>
                        <div v-if="isUnionFinishedWhite" class="unionFinished">
                          <div class="listUnionInfo">
                            <p>
                              即便是不是授权区域内的项目，加入白名单后也能使用银联代发
                            </p>
                            <span
                              v-for="(item, index) of unionPayWhiteList"
                              :key="index"
                              >{{ item.projectName }}</span
                            >
                            <!-- <span>湖北金融港项目</span>
                                          <span>湖北金融港三期项目</span> -->
                          </div>
                          <el-pagination
                            v-if="unionPayWhiteList.length > 0"
                            layout="prev, pager, next"
                            :total="unionPayResult.whiteList.total"
                            :current-page.sync="pageNoWhite"
                            :page-size="pageSizeNumber"
                            @current-change="
                              whiteCurrentChange($event, unionPayResult.id)
                            "
                            class="listUnionPage"
                          >
                          </el-pagination>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row class="unionBox">
                      <el-col :span="3" class="unionTitle">黑名单</el-col>
                      <el-col :span="21" class="unionWrap">
                        <div v-if="isUnionNoEditBlack" class="unionNoEdit">
                          <p>
                            即便是授权区域内的项目，加入黑名单后也不能使用银联代发
                          </p>
                          <span>尚未配置</span>
                        </div>
                        <div v-if="isUnionEditBlack" class="unionEdit">
                          <div class="unionList blackList">
                            <div v-if="blackListAddBtn" class="listAdd">
                              <el-button
                                class="commonBut listAddBtn"
                                type="primary"
                                @click="blackListAdd"
                                >添加</el-button
                              >
                              <p>
                                即便是授权区域内的项目，加入黑名单后也不能使用银联代发
                              </p>
                            </div>
                            <div v-if="blackListAddSure" class="listAddSure">
                              <el-select
                                v-model="blackSelectListVal"
                                placeholder="输入项目名称，点击确认"
                                clearable
                                filterable
                                @change="blackSelectChange"
                                @clear="blackSelectClear"
                                class="listSearch"
                              >
                                <el-option
                                  v-for="item in blackSelectList"
                                  :key="item.id"
                                  :label="item.projectName"
                                  :value="item.id"
                                ></el-option>
                              </el-select>

                              <el-button
                                class="commonBut listAddSureBtn"
                                type="primary"
                                @click="blackListSure(unionPayResult.id)"
                                >确认</el-button
                              >
                              <el-button
                                class="commonBut listAddCancelBtn"
                                type="primary"
                                @click="blackListCancel"
                                >取消</el-button
                              >
                            </div>
                            <div class="listUnionBox">
                              <div class="listUnionContent">
                                <div
                                  v-for="(item, index) of unionPayBlackList"
                                  :key="index"
                                  class="listUnionWrap"
                                >
                                  <p>{{ item.projectName }}</p>
                                  <span
                                    @click="
                                      handelListDelete(
                                        unionPayResult.id,
                                        item.projectId,
                                        '3'
                                      )
                                    "
                                    >删除</span
                                  >
                                </div>
                              </div>
                              <el-pagination
                                v-if="unionPayBlackList.length > 0"
                                small
                                background
                                :page-sizes="[5, 10, 15]"
                                layout="prev, pager, next,sizes, jumper"
                                :total="pageTotalBlackEdit"
                                :current-page.sync="pageNoBlackEdit"
                                :page-size="pageSizeNumberBlackEdit"
                                @size-change="
                                  blackhandleSizeChangeEdit(
                                    $event,
                                    unionPayResult.id
                                  )
                                "
                                @current-change="
                                  blackCurrentChangeEdit(
                                    $event,
                                    unionPayResult.id
                                  )
                                "
                                class="listUnionPage"
                              >
                              </el-pagination>
                            </div>
                          </div>
                        </div>
                        <div v-if="isUnionFinishedBlack" class="unionFinished">
                          <div class="listUnionInfo">
                            <p>
                              即便是授权区域内的项目，加入黑名单后也不能使用银联代发
                            </p>
                            <span
                              v-for="(item, index) of unionPayBlackList"
                              :key="index"
                              >{{ item.projectName }}</span
                            >
                            <!-- <span>湖北金融港项目</span>
                                          <span>湖北金融港4期项目</span> -->
                          </div>
                          <el-pagination
                            v-if="unionPayBlackList.length > 0"
                            layout="prev, pager, next"
                            :total="unionPayResult.blackList.total"
                            :current-page.sync="pageNoBlack"
                            :page-size="pageSizeNumber"
                            @current-change="
                              blackCurrentChange($event, unionPayResult.id)
                            "
                            class="listUnionPage"
                          >
                          </el-pagination>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row class="unionBox unionBoxBtn">
                      <el-col :span="3" class="unionTitle"></el-col>
                      <el-col :span="21" class="unionWrap">
                        <el-button
                          class="commonBut saveBtn unionBtn"
                          type="primary"
                          @click="editUnionHandle"
                          >{{ unionEditBtnText }}</el-button
                        >
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <div class="infoTitle">工资表其他设置</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple salaryOther">
              <el-row>
                <el-col :span="6">
                  <p class="salaryTitle">工资代发人员要求：</p>
                </el-col>
                <el-col :span="17">
                  <div class="salaryOperate salaryCheckbox">
                    <el-checkbox
                      label="10"
                      class="checkbox"
                      v-model="needKaoQingRecord"
                      >工资当月有考勤记录</el-checkbox
                    >
                    <el-checkbox
                      label="20"
                      class="checkbox"
                      v-model="needContact"
                      >签订劳动合同</el-checkbox
                    >
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <p class="salaryTitle">同一企业同一月份人员代发次数限制：</p>
                </el-col>
                <el-col :span="17">
                  <div class="salaryOperate salaryRadio">
                    <el-radio-group v-model="limitUserRadio">
                      <el-radio label="0">一次</el-radio>
                      <el-radio label="1">不限制</el-radio>
                    </el-radio-group>
                  </div>
                </el-col>
              </el-row>
              <!-- <el-row>
                            <el-col :span="7"><p>&nbsp;</p></el-col>
                            <el-col :span="17" class="salaryOtherBtn">
                                <el-button class="commonBut saveBtn" type="primary" @click="salaryOtherEdit(salaryOtherResult)">{{salaryEditBtnText}}</el-button>
                            </el-col>
                        </el-row> -->
            </div>
          </el-col>
        </el-row>
      </el-form>
      <agency-payment v-if="activeName == 'first' && showJz" />
    </div>
  </div>
</template>

<script>
import topTitle from '@/components/publicCom/topTitle'
import emptyTable from '@/components/publicCom/emptyTable'
import Pagination from '@/components/publicCom/pagination'
import common from '../../kits/common'
import AgencyPayment from './agencyPayment.vue'
export default {
  name: 'issueSetting',
  components: {
    emptyTable,
    Pagination,
    topTitle,
    AgencyPayment,
  },
  data() {
    return {
      activeName: 'first',
      titleText: '代发设置',
      titleExplain:
        '修改代发设置后即时生效，修改前已上报的工资表不受修改影响，按照此前的代发方式运行。',
      isAdd: false,
      showUnion: false, //是否显示银联
      tipsMsg: '',
      isUnionNoEditWhite: true,
      isUnionEditWhite: false,
      isUnionFinishedWhite: false,
      isUnionNoEditBlack: true,
      isUnionEditBlack: false,
      isUnionFinishedBlack: false,

      whiteListAddBtn: true,
      blackListAddBtn: true,
      whiteListAddSure: false,
      blackListAddSure: false,
      unionEditBtnText: '编辑权限配置',
      salaryEditBtnText: '编辑',

      bankWayResult: [],
      unionPayResult: {},
      salaryOtherResult: {},
      unionPayWhiteList: [],
      unionPayBlackList: [],

      unionPaySwitch: '',
      //工资表其他设置相关参数
      salaryEnterSwitch: '',
      limitUserRadio: '', //同一项目同一月份人员代发次数限制
      needKaoQingRecord: false, //需要考勤记录
      needContact: false, //需要合同

      pageTotalWhiteEdit: 0,
      pageTotalBlackEdit: 0,
      pageNoWhite: 1,
      pageNoBlack: 1,
      pageNoWhiteEdit: 1,
      pageNoBlackEdit: 1,
      pageSizeNumber: 10,
      pageSizeNumberWhiteEdit: 10,
      pageSizeNumberBlackEdit: 10,

      // areaId: ['15','1501'],
      areaId: '',
      areaIds: '',
      areaIdOpt: [],

      // 白/黑名单远程搜索
      whiteSelectListVal: '',
      whiteSelectList: [],
      blackSelectListVal: '',
      blackSelectList: [],

      whiteProjectId: '',
      whiteProjectName: '',
      blackProjectId: '',
      blackProjectName: '',

      isSalaryEdit: true,
      salaryOtherVal: '',
      showFj: false,
      showJz: false,
    }
  },
  created() {
    if (this.$store.state.appList.length > 0) {
      this.$store.state.appList.forEach((item) => {
        // if(item.name == "非建领域"){
        //   this.showFj = true;
        // }
        // if(item.name == "建设领域"){
        //   this.showJz = true;
        // }
        if (item.code == 'company') {
          this.showFj = true
        }
        if (item.code == 'owner' || item.code == 'project') {
          this.showJz = true
        }
      })
    }
    if (this.showFj && !this.showJz) {
      this.activeName = 'second'
    }
    if (!this.showFj && this.showJz) {
      this.activeName = 'first'
    }
  },
  mounted() {
    this.initArea()
  },
  methods: {
    /**
     * @name:
     * @param {*}
     * @Author: luoyong/471826078@qq.com
     */
    submitEdit() {
      this.isAdd = true
      const {
        areaIds,
        bankWayResult,
        limitUserRadio,
        needKaoQingRecord,
        needContact,
      } = this
      let salaryStr =
        (needKaoQingRecord ? 1 : 0) +
        ',' +
        (needContact ? 1 : 0) +
        ',' +
        limitUserRadio
      bankWayResult.forEach((item) => {
        if (item.subcategory == '91') {
          item.value = item.objValue1 + ',' + item.objValue2
          delete item.objValue1
          delete item.objValue2
        }
        if (item.subcategory == '93') {
          item.value = salaryStr
        }
      })

      let params = {
        areaId: areaIds,
        paramConfigList: bankWayResult,
        ncParamConfigVO: 1,
      }
      this.axios
        .post('api-m/ncparamconfig/expand/saveorupdateconfig', params, {
          headers: {
            'Content-Type': 'application/json', //设置请求头请求格式为JSON
          },
        })
        .then((res) => {
          if (!res.data.hasError) {
            this.isAdd = false
            this.$message({
              message: res.data.msg,
              type: 'success',
            })
            this.getInitData()
          } else {
            this.isAdd = false
            this.$message({
              message: res.data.errorMsg,
              type: 'warning',
            })
          }
        })
    },
    // 初始化页面数据
    getInitData() {
      this.axios
        .post('/api-m/ncparamconfig/expand/findncparamconfig', {
          areaId: this.areaIds,
        })
        .then((response) => {
          if (!response.data.hasError) {
            if (response.data.msg) {
              this.tipsMsg = response.data.msg
            } else {
              this.tipsMsg = ''
            }
            this.bankWayResult = []
            this.unionPayResult = []
            this.salaryOtherResult = []
            let curData = response.data.result
            for (var i = 0; i < curData.length; i++) {
              if (curData[i].subcategory == '91') {
                // 银行代发方式设置
                let obj = curData[i]
                let objValue = obj.value.split(',')
                let objValue1 = objValue[0]
                let objValue2 = objValue[1]
                curData[i].objValue1 = objValue1
                curData[i].objValue2 = objValue2
              }
              if (curData[i].subcategory == '92') {
                // 银联代发设置
                // this.unionPayResult = curData[i];
                // this.unionPaySwitch = this.unionPayResult.value;
                // this.pageTotalWhiteEdit = this.unionPayResult.whiteList.total;
                // this.pageTotalBlackEdit = this.unionPayResult.blackList.total;
                // if(this.unionPayResult.whiteList!=null && this.unionPayResult.whiteList.results!=null && this.unionPayResult.whiteList.results.length>0){
                //   this.unionPayWhiteList = this.unionPayResult.whiteList.results;
                //   this.isUnionNoEditWhite = false;
                //   this.isUnionEditWhite = false;
                //   this.isUnionFinishedWhite = true;
                //   this.unionEditBtnText = '编辑权限配置';
                // }else{
                //   this.isUnionNoEditWhite = true;
                //   this.isUnionEditWhite = false;
                //   this.isUnionFinishedWhite = false;
                //   this.unionEditBtnText = '编辑权限配置';
                // }
                // if(this.unionPayResult.blackList!=null && this.unionPayResult.blackList.results!=null && this.unionPayResult.blackList.results.length>0){
                //   this.unionPayBlackList = this.unionPayResult.blackList.results;
                //   this.isUnionNoEditBlack = false;
                //   this.isUnionEditBlack = false;
                //   this.isUnionFinishedBlack = true;
                //   this.unionEditBtnText = '编辑权限配置';
                // }else{
                //   this.isUnionNoEditBlack = true;
                //   this.isUnionEditBlack = false;
                //   this.isUnionFinishedBlack = false;
                //   this.unionEditBtnText = '编辑权限配置';
                // }
              }
              if (curData[i].subcategory == '93') {
                let arr = curData[i].value.split(',')
                this.needKaoQingRecord = arr[0] == 0 ? false : true
                this.needContact = arr[1] == 0 ? false : true
                this.limitUserRadio = arr[2]
              }
            }
            this.bankWayResult = curData
          } else {
            // this.$message({
            //   type: "error",
            //   message: response.data.msg,
            // });
          }
        })
        .catch((error) => {})
    },

    // 银联代发编辑权限配置
    editUnionHandle() {
      if (this.unionEditBtnText == '编辑权限配置') {
        this.isUnionNoEditWhite = false
        this.isUnionNoEditBlack = false
        this.isUnionEditWhite = true
        this.isUnionEditBlack = true
        this.isUnionFinishedWhite = false
        this.isUnionFinishedBlack = false
        this.unionEditBtnText = '完成'
        this.whiteSelectListVal = ''
        this.blackSelectListVal = ''
        this.whiteProjectId = ''
        this.whiteProjectName = ''
        this.blackProjectId = ''
        this.blackProjectName = ''
        this.getPageData(
          this.unionPayResult.id,
          '2',
          '1',
          this.pageSizeNumberWhiteEdit
        )
        this.getPageData(
          this.unionPayResult.id,
          '3',
          '1',
          this.pageSizeNumberBlackEdit
        )
      } else {
        this.getInitData()
      }
    },

    // 白名单确认添加
    whiteListSure(strId) {
      this.axios({
        method: 'post',
        url: 'api-m/paramconfig/expand/addWhiteConfigProject',
        data: {
          paramId: strId,
          projectId: this.whiteProjectId,
          projectName: this.whiteProjectName,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.getPageData(strId, '2', '1', this.pageSizeNumberWhiteEdit)
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    // 黑名单确认添加
    blackListSure(strId) {
      this.axios({
        method: 'post',
        url: 'api-m/paramconfig/expand/addBalckConfigProject',
        data: {
          paramId: strId,
          projectId: this.blackProjectId,
          projectName: this.blackProjectName,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              // this.blackListAddSure = false;
              // this.blackListAddBtn = true;
              this.getPageData(strId, '3', '1', this.pageSizeNumberWhiteEdit)
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {
          console.log(error)
        })
    },
    // 删除项目
    handelListDelete(strId, projectId, type) {
      this.axios({
        method: 'post',
        url: 'api-m/paramconfig/expand/deleteConfigProject',
        data: {
          paramId: strId,
          projectId: projectId,
          paramType: type,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              if (type == '2') {
                this.getPageData(strId, '2', '1', this.pageSizeNumberWhiteEdit)
              }
              if (type == '3') {
                this.getPageData(strId, '3', '1', this.pageSizeNumberBlackEdit)
              }
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },

    //switch的change事件
    changeState($event, item, type, subType) {
      let switchVal = ''
      let strArr = []
      if (type == '10') {
        strArr = item.value.split(',')
        for (var i = 0; i < strArr.length; i++) {
          if ($event == 1) {
            if (subType == strArr[i].substring(0, 2)) {
              strArr[i] = subType + '_' + $event
            } else {
              strArr[i] = strArr[i].substring(0, 2) + '_0'
            }
          } else {
            if (subType == strArr[i].substring(0, 2)) {
              strArr[i] = subType + '_' + $event
            }
          }
        }
        switchVal = strArr.join(',')
      }
      if (type == '11') {
        switchVal = $event
      }
      if (type == '12') {
        strArr = item.value.split(',')
        for (var i = 0; i < strArr.length; i++) {
          if (subType == strArr[i].substring(0, 2)) {
            strArr[i] = subType + '_' + $event
          }
        }
        switchVal = strArr.join(',')
      }
      // console.log(switchVal);

      //   this.saveEditSetting(item.id,item.name,switchVal,item.mainClassification,item.subcategory,item.areaId);
    },

    // 保存银行代发/银联代发/工资表其他设置
    saveEditSetting(id, name, value, mainClassification, subcategory, areaId) {
      this.axios({
        method: 'post',
        url: 'api-m/paramconfig/expand/editAgencyConfig',
        data: {
          id: id, //id
          name: name, //名称
          value: value, //配置值
          mainClassification: mainClassification, //主分类，默认均1-代发设置
          subcategory: subcategory, //子分类，10-银行代发，11-银联代发，12-工资表其他设置
          areaId: areaId, //区域id
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.getInitData()
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },

    // 工资表其他设置编辑
    salaryOtherEdit(item) {
      if (this.salaryEditBtnText == '编辑') {
        this.isSalaryEdit = false
        this.salaryEditBtnText = '完成'
      } else {
        // this.saveEditSetting(item.id,item.name,this.salaryOtherVal,item.mainClassification,item.subcategory,item.areaId);
        this.isSalaryEdit = true
        this.salaryEditBtnText = '编辑'
      }
    },

    // 初始化区域
    initArea() {
      this.axios({
        method: 'post',
        url: 'api-m/paramconfig/expand/areaTreeByUser',
        data: {
          // paramId: '',
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.areaIdOpt = response.data.result
              this.areaIds = response.data.result[0].value
              this.areaId = response.data.result[0].value
              this.getInitData()
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {
          console.log(error)
        })
    },
    // 项目列表下拉搜索
    selectSearch() {
      this.axios({
        method: 'post',
        url: 'api-m/paramconfig/expand/findProjectByArea',
        data: {
          areaId: this.areaIds,
        },
      })
        .then(
          (response) => {
            this.whiteSelectList = []
            this.blackSelectList = []
            if (!response.data.hasError) {
              for (var i = 0; i < response.data.result.length; i++) {
                this.whiteSelectList.push(response.data.result[i])
                this.blackSelectList.push(response.data.result[i])
              }
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {
          console.log(error)
        })
    },
    whiteSelectChange(e) {
      this.whiteSelectList.map((item) => {
        if (item.id == e) {
          this.whiteProjectId = item.id
          this.whiteProjectName = item.projectName
        }
      })
    },
    whiteSelectClear(e) {
      this.whiteProjectId = ''
      this.whiteProjectName = ''
    },
    blackSelectChange(e) {
      this.blackSelectList.map((item) => {
        if (item.id == e) {
          this.blackProjectId = item.id
          this.blackProjectName = item.projectName
        }
      })
    },
    blackSelectClear(e) {
      this.blackProjectId = ''
      this.blackProjectName = ''
    },
    // 分页
    getPageData(paramId, type, pageNo, pageSize) {
      this.axios({
        method: 'post',
        url: 'api-m/paramconfig/expand/findBankAgencyConfigProjects',
        data: {
          paramId: paramId,
          type: type,
          pageNo: pageNo,
          pageSize: pageSize,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              if (type == '2') {
                this.unionPayWhiteList = response.data.result.results
                if (this.isUnionEditWhite) {
                  this.pageTotalWhiteEdit = response.data.result.total
                }
              } else {
                this.unionPayBlackList = response.data.result.results
                if (this.isUnionEditBlack) {
                  this.pageTotalBlackEdit = response.data.result.total
                }
              }
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {
          console.log(error)
        })
    },
    // 白名单currentPage改变
    whiteCurrentChange($event, strId) {
      this.getPageData(strId, '2', $event, this.pageSizeNumber)
    },
    // 黑名单currentPage改变
    blackCurrentChange($event, strId) {
      this.getPageData(strId, '3', $event, this.pageSizeNumber)
    },
    // 白/黑名单编辑
    whitehandleSizeChangeEdit($event, strId) {
      this.pageSizeNumberWhiteEdit = $event
      this.getPageData(strId, '2', '1', this.pageSizeNumberWhiteEdit)
    },
    blackhandleSizeChangeEdit($event, strId) {
      this.pageSizeNumberBlackEdit = $event
      this.getPageData(strId, '3', '1', this.pageSizeNumberBlackEdit)
    },
    whiteCurrentChangeEdit($event, strId) {
      this.getPageData(strId, '2', $event, this.pageSizeNumberWhiteEdit)
    },
    blackCurrentChangeEdit($event, strId) {
      this.getPageData(strId, '3', $event, this.pageSizeNumberBlackEdit)
    },

    //区域change事件
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.areaIds = areaId
      this.getInitData()
    },

    // 白名单添加
    whiteListAdd() {
      this.whiteSelectListVal = ''
      this.selectSearch()
      this.whiteListAddBtn = false
      this.whiteListAddSure = true
    },
    // 黑名单添加
    blackListAdd() {
      this.blackSelectListVal = ''
      this.selectSearch()
      this.blackListAddBtn = false
      this.blackListAddSure = true
    },
    // 白名单取消
    whiteListCancel() {
      this.whiteListAddSure = false
      this.whiteListAddBtn = true
      this.whiteSelectListVal = ''
      this.whiteProjectId = ''
      this.whiteProjectName = ''
    },
    // 黑名单取消
    blackListCancel() {
      this.blackListAddSure = false
      this.blackListAddBtn = true
      this.blackSelectListVal = ''
      this.blackProjectId = ''
      this.blackProjectName = ''
    },
    tabChange(data) {
      if (data == 'first') {
        this.showJz = true
        this.showFj = false
      } else {
        this.showFj = true
        this.showJz = false
      }
    },
  },
  watch: {},
}
</script>

<style lang="less" scoped>
.container {
  .mainCon {
    background: #fff;
    padding: 24px;
    height: calc(100% - 80px);
    overflow-y: auto;
    .unionEditContent {
      width: 100%;
      padding: 40px 0px;
      box-sizing: border-box;
      .unionBox {
        width: 100%;
        margin-bottom: 28px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        .unionTitle {
          padding-right: 10px;
          box-sizing: border-box;
          font-size: 14px;
          color: #333;
          white-space: nowrap;
          text-align: right;
        }
        .unionWrap {
          padding-left: 10px;
          box-sizing: border-box;
          .unionNoEdit {
            margin-bottom: 15px;
            p {
              font-size: 14px;
              color: #999;
              margin-bottom: 12px;
            }
            span {
              font-size: 14px;
              color: #333;
            }
          }
          .unionEdit {
            width: 100%;
            margin-bottom: 15px;
            .unionList {
              width: 80%;
              .listAdd {
                width: 100%;
                margin-bottom: 15px;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                .listAddBtn {
                  width: 80px;
                  background: rgb(121, 121, 121);
                  border: 0;
                }
                p {
                  margin-left: 15px;
                  font-size: 14px;
                  color: #999;
                }
              }
              .listAddSure {
                width: 100%;
                margin-bottom: 15px;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                .listSearch {
                  width: 520px;
                  // width:60%;
                }
                .listAddSureBtn {
                  width: 80px;
                  background: rgb(22, 155, 212);
                  border: 0;
                  margin-left: 10px;
                }
                .listAddCancelBtn {
                  width: 80px;
                  background: #fff;
                  border: 1px solid #333;
                  color: #333;
                }
              }
              .listUnionBox {
                width: 520px;
                // width:60%;
                background: rgb(242, 242, 242);
                border-radius: 4px;
                .listUnionContent {
                  width: 100%;
                  .listUnionWrap {
                    width: 100%;
                    padding: 10px 13px;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    p {
                      font-size: 14px;
                      color: #333;
                    }
                    span {
                      display: none;
                      font-size: 14px;
                      color: #409eff;
                      font-weight: bold;
                      cursor: pointer;
                      white-space: nowrap;
                    }
                  }
                  .listUnionWrap:hover {
                    background: rgb(214, 214, 214);
                    span {
                      display: block;
                    }
                  }
                }
                .listUnionPage {
                  width: 100%;
                  padding: 15px 5px;
                  .el-pagination__jump {
                    margin-left: 0;
                  }
                }
              }
            }
            .areaList {
              width: 100%;
              .areaListTitle {
                width: 100%;
                font-size: 14px;
                color: #999;
                margin-bottom: 12px;
              }
              .areaBox {
                width: 65%;
                height: 250px;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: flex-start;
                border: 1px solid rgb(216, 216, 216);
                border-radius: 4px;
                overflow: hidden;
                .areaChoose {
                  width: 50%;
                  height: 100%;
                  .areaChooseTree {
                    width: 100%;
                    height: 100%;
                    padding-top: 40px;
                    padding-left: 20px;
                    box-sizing: border-box;
                    // border:1px solid red;
                  }
                }
                .areaAuth {
                  width: 50%;
                  height: 100%;
                  border-left: 1px solid rgb(216, 216, 216);
                  .areaAuthTitle {
                    height: 40px;
                    line-height: 40px;
                    padding-left: 15px;
                    box-sizing: border-box;
                    font-size: 14px;
                    color: #666;
                    border-bottom: 1px solid rgb(216, 216, 216);
                  }
                  .areaAuthBox {
                    width: 100%;
                    height: 210px;
                    .areaAuthBoxUl {
                      width: 100%;
                      height: 100%;
                      padding: 5px 0px;
                      box-sizing: border-box;
                      overflow-y: scroll;
                      li {
                        width: 100%;
                        height: 30px;
                        padding-left: 50px;
                        padding-right: 10px;
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: center;
                        // border:1px solid red;
                        p {
                          font-size: 14px;
                          color: #666;
                        }
                        span {
                          display: none;
                          font-size: 14px;
                          color: #409eff;
                          font-weight: bold;
                          cursor: pointer;
                        }
                      }
                      li:hover {
                        background-color: #f5f7fa;
                        p {
                          color: #aaa;
                        }
                        span {
                          display: block;
                        }
                      }
                    }
                    .areaAuthBoxTip {
                      width: 100%;
                      height: 100%;
                      font-size: 14px;
                      color: #999;
                      display: flex;
                      flex-direction: row;
                      justify-content: center;
                      align-items: center;
                    }
                  }
                }
              }
            }
          }
          .unionFinished {
            .unionFinishedTitle {
              font-size: 14px;
              color: #999;
              margin-bottom: 12px;
            }
            .listUnionInfo {
              p {
                font-size: 14px;
                color: #999;
                margin-bottom: 12px;
              }
              span {
                display: block;
                font-size: 14px;
                color: blue;
                margin-bottom: 5px;
                cursor: pointer;
              }
            }
            .listUnionBox {
              width: 520px;
              // width:60%;
              background: rgb(242, 242, 242);
              border-radius: 4px;
              .listUnionContent {
                width: 100%;
                .listUnionWrap {
                  width: 100%;
                  padding: 10px 13px;
                  box-sizing: border-box;
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                  align-items: center;
                  p {
                    font-size: 14px;
                    color: #333;
                    margin-bottom: 0;
                  }
                  span {
                    display: none;
                    font-size: 14px;
                    color: #409eff;
                    font-weight: bold;
                    cursor: pointer;
                  }
                }
                .listUnionWrap:hover {
                  background: rgb(214, 214, 214);
                  span {
                    display: block;
                  }
                }
              }
              .listUnionPage {
                width: 100%;
                padding: 15px 5px;
                .el-pagination__jump {
                  margin-left: 0;
                }
              }
            }
            .listUnionPage {
              width: 100%;
              padding: 0px 0px;
              .el-pagination__jump {
                margin-left: 0;
              }
            }
          }
        }
      }
      .unionBoxBtn {
        margin-bottom: 0;
      }
    }
    .bankPay {
      width: 100%;
      //   height:242px;
      //   overflow-y: scroll;
      // border:1px solid red;
    }

    .infoTitle {
      font-size: 16px;
      padding: 18px 24px;
      background: #f5f7fb;
      color: #333;
      font-weight: 700;
    }
    .switchBox {
      height: 60px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 1px solid #dee5f4;
      span {
        vertical-align: middle;
        margin-right: 15px;
        font-size: 14px;
        color: #333;
      }
      .bankName {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding-left: 24px;
        box-sizing: border-box;
      }
      .bankName:before {
        display: inline-block;
        width: 8px;
        height: 8px;
        content: '';
        background: #009588;
        margin-right: 10px;
      }
    }
    .switchBoxUnion {
      border-bottom: 0;
      margin-top: 20px;
      // border:1px solid red;
      .bankName:before {
        display: inline-block;
        width: 0px;
        height: 0px;
        content: '';
        background: transparent;
        margin-right: 0px;
      }
    }
    .salaryOther {
      width: 100%;
      padding: 40px 0px;
      box-sizing: border-box;
      .switchBoxSalary {
        height: auto;
        border-bottom: 0;
      }
      .salaryTitle {
        margin-left: 24px;
        margin-right: -5px;
        margin-bottom: 32px;
        font-size: 14px;
        color: #3a3a3a;
        text-align: left;
        font-weight: bold;
      }
      .salaryOperate {
        // padding-left:25px;
        box-sizing: border-box;
      }
      .salaryOtherBtn {
        padding-left: 25px;
        box-sizing: border-box;
      }
    }
    .el-cascader {
      width: 100%;
    }
  }
  .tipsMsg {
    line-height: 36px;
    font-size: 14px;
    color: #666;
    padding-left: 24px;
  }
}
.tabsContainer {
  margin-bottom: 24px;
}
// .el-switch.is-checked .el-switch__core{
//    border-color:#009588 !important;
//    background-color:#009588 !important;
// }
</style>
